import React, { Component } from 'react';
import { Dialog, Button, Form, Input, Field, Feedback } from '@icedesign/base';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import Api from '../../../../Api/Api';
import Ajax from '../../../../Ajax/index';

const FormItem = Form.Item;

@withRouter
export default class ColumnForm extends Component {
  static displayName = 'ColumnForm';

  static defaultProps = {};

  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
    this.field = new Field(this);
  }

  handleSubmit = () => {
    this.field.validate((errors, values) => {
      if (errors) {
        console.log('Errors in form!!!');
        return;
      } else {
          var url = Api.addAdvert(values);
        //   console.log(url);
          Feedback.toast.show({
            type: 'loading',
            content: '正在添加'
          });
          Ajax.get(url)
            .then((res) => {
                Feedback.toast.hide();
                if (res.data.code) {
                    Feedback.toast.show({
                        content: res.data.message,
                        afterClose: () => {
                            this.onClose();
                        }
                    })
                }
            })
      }
    });
  };

  onClose = () => {
    this.props.history.push('/dashboard/adlist');
  };

  render() {
    const init = this.field.init;
    const { index, record } = this.props;
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };

    return (
      <div style={styles.editDialog}>
        <Dialog
          style={{ width: 640 }}
          visible={this.state.visible}
          onOk={this.handleSubmit}
          closable="esc,mask,close"
          onCancel={this.onClose}
          onClose={this.onClose}
          title="添加广告"
        >
          <Form direction="ver" field={this.field}>
            <FormItem label="广告介绍：" {...formItemLayout}>
              <Input
                {...init('title', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="广告所属：" {...formItemLayout}>
              <Input
                {...init('author', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="广告地址：" {...formItemLayout}>
              <Input
                {...init('src', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="发布时间：" {...formItemLayout}>
              <Input
                {...init('date', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>
          </Form>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  editDialog: {
    display: 'inline-block',
    marginRight: '5px',
  },
};
